//首先定义背景
.banner {
    background-color: rgba(0, 0, 0, 0.8509803922);
    height: 100vh;
    width: 100%;
}
//定义星空背景用shadow来循环生成
@function getShadows($n) {
    $Shadows :'#{random(100)}vw #{random(100)}vh #fff';

    @for $i from 2 to $n {
        $Shadows :'#{$Shadows}, #{random(100)}vw #{random(100)}vh #fff';
    }

    @return unquote($Shadows)
}

$duration :500s; //滚动时间
$count :500; //星空的数量
//循环生成星空，layer1到layer4
@for $i from 1 to 5 {
    $duration: floor($duration/2);
    $count: floor($count/2);

    .layer#{$i} {
        $size:#{$i}px;
        position: fixed;
        width: $size;
        height: $size;
        background-color: rgba(0, 0, 0, 0.032);
        border-radius: 50%;
        top: 0;
        left: 0;
        box-shadow: getShadows($count);
        animation: moveUp $duration linear infinite;

        &::after {
            content: '';
            position: fixed;
            left: 0;
            top: -100vh;
            border-radius: inherit;
            box-shadow: inherit;
            width: $size;
            height: $size;
        }
    }
}
//滚动的动画，无限像Y轴滚动，
@keyframes moveUp {
    100% {
        transform: translateY(100vh);
    }
}

